<template>
  <div class="subscribeRecord">
    <c-title text="经销商认购奖励"></c-title>
    <div class="member">
      <div class="img">
        <img :src="avatar_image" alt="" class="image">
      </div>
      <div>
        <div class="nickname">{{ nickname }}</div>
        <div class="levelname" v-if="agent_level">{{ agent_level }}</div>
      </div>
      <div class="row total">
        <div class="label">累计经销商级差奖励</div>
        <div class="money">{{ $i18n.t('money') }} {{ grand_amount }}</div>
      </div>
    </div>
    <van-tabs v-model="active" @change="change">
      <van-tab title="级差奖励" name="record"></van-tab>
      <van-tab title="平级奖励" name="level"></van-tab>
    </van-tabs>
    <div style="height: 0.5rem;"></div>
    <div class="list">
      <template v-if="active == 'record'">
        <div class="list-item" v-for="(item, i) in list" :key="i">
          <div class="info">
            <div class="row">
              <div class="label id">奖励ID：{{ item.id }}</div>
              <div class="money">+{{ item.amount }}</div>
            </div>
            <div>时间：{{ item.created_at }}</div>
          </div>
          <div class="row members">
            <div class="label">
              <div class="img">
                <img :src="item.buy_avatar_image" alt="" class="image">
              </div>
              <div>
                <div class="nickname">{{ item.buy_nickname }}</div>
                <div class="member_id">ID：{{ item.uid }}</div>
              </div>
            </div>
            <div class="count">认购数量：{{ item.quantity }}</div>
          </div>
        </div>
      </template>
      <template v-if="active == 'level'">
        <div class="list-item" v-for="(item, i) in list" :key="i">
          <div class="info">
            <div class="row">
              <div class="label id">奖励ID：{{ item.id }}</div>
              <div class="money">+{{ item.amount }}</div>
            </div>
            <div>时间：{{ item.created_at }}</div>
          </div>
          <div class="row members">
            <div class="label">
              <div class="img">
                <img :src="item.buy_avatar_image" alt="" class="image">
              </div>
              <div>
                <div class="nickname">{{ item.buy_nickname }}</div>
                <div class="member_id">ID：{{ item.uid }}</div>
              </div>
            </div>
            <div class="count">结算金额：{{ item.quantity }}</div>
          </div>
        </div>
      </template>
    </div>
    <van-empty v-if="list.length == 0" description="暂无认购奖励记录"></van-empty>
  </div>
</template>
<script>
import { scrollMixin } from "utils/mixin";
export default {
  mixins: [scrollMixin],
  data() {
    return {
      active: "record",
      isLoadMore: true,
      page: 1,
      last_page: 1,
      list: [],
      nickname: '',
      avatar_image: '',
      agent_level: "",
      grand_amount: ""
    }
  },
  activated() {
    this.init();
    this.getData()
  },
  methods: {
    change() {
      if (this.active == 'record') {
        this.getData()
      } else {
        this.getLevelData()
      }
    },
    init() {
      this.page = 1;
      this.last_page = 1;
      this.isLoadMore = true;
    },
    getLevelData(page = 1) {
      $http.post("plugin.subscription.frontend.modules.tier.controllers.records.index", { page }).then(res => {
        if (res.result) {
          let data = res.data;
          if (page = 1) {
            this.list = data.page_list.data
            this.last_page = data.page_list.last_page
            this.nickname = data.nickname
            this.avatar_image = data.avatar_image
            this.agent_level = data.agent_level
            this.grand_amount = data.grand_amount
          } else {
            this.list = this.list.concat(data.page_list.data)
            this.page = data.page_list.current_page
          }
        } else {
          this.$toast(res.msg)
        }
      })
    },
    getData(page = 1) {
      $http.post("plugin.subscription.frontend.modules.bonus.controllers.records.index", { page }).then(res => {
        if (res.result) {
          let data = res.data;
          if (page = 1) {
            this.list = data.page_list.data
            this.last_page = data.page_list.last_page
            this.nickname = data.nickname
            this.avatar_image = data.avatar_image
            this.agent_level = data.agent_level
            this.grand_amount = data.grand_amount
          } else {
            this.list = this.list.concat(data.page_list.data)
            this.page = data.page_list.current_page
          }
        } else {
          this.$toast(res.msg)
        }
      })
    },
    getMoreData() {
      if (this.page >= this.last_page) {
        return false;
      }
      let page = this.page + 1;
      if(this.active == 'record'){
          this.getData(page)
      }else{
          this.getLevelData(page)
      }

    }
  },
}
</script>
<style scoped lang="scss">
.subscribeRecord {
  text-align: left;
  $w: calc(100% - 1.6rem);

  .money {
    color: #f15353;
  }

  .image {
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }

  .member {
    width: 100%;
    height: 7rem;
    background-color: #ff8924;
    display: flex;
    align-items: center;
    padding: 0 0.8rem;
    position: relative;
    margin-bottom: 1.8rem;

    .img {
      width: 3.44rem;
      height: 3.44rem;
      margin-right: 0.4rem;
    }

    .nickname {
      font-size: 1rem;
      color: #fff;
      line-height: 1.5rem;
    }

    .levelname {
      display: inline-block;
      height: 1.35rem;
      line-height: 1.35rem;
      border-radius: 0.63rem;
      background-color: #fff;
      padding: 0 0.5rem;
      font-size: 0.69rem;
      color: #ba750c;
    }

    .total {
      position: absolute;
      bottom: -1.25rem;
      width: $w;
      height: 2.5rem;
      border-radius: 0.31rem;
      background-color: #fff;
      padding: 0 1rem;
      align-items: center;
    }
  }

  .row {
    display: flex;
    width: 100%;

    .label {
      flex: 1;
    }
  }

  ::v-deep .van-tabs {
    width: $w;
    margin: 0 auto;

    .van-tabs__wrap {
      border-radius: 0.31rem 0.31rem 0 0;
    }
  }

  .list {
    width: $w;
    margin: 0 auto;

    .list-item {
      height: 7.3rem;
      border-radius: 0.31rem;
      background-color: #fff;
      padding: 0 1rem;
      margin-bottom: 0.5rem;

      .info {
        border-bottom: 0.08rem solid #f2f2f2;
        height: 4rem;
        line-height: 2rem;

        .id {
          color: #353535;
          font-size: 0.81rem;
        }
      }

      .members {
        height: 3.3rem;
        line-height: 1.65rem;

        .label {
          height: 100%;
          display: flex;
          align-items: center;

          .img {
            width: 1.7rem;
            height: 1.7rem;
            margin-right: 0.4rem;
          }

          .nickname {
            font-size: 0.75rem;
            line-height: 1.2rem;
            color: #353535;
          }

          .member_id {
            line-height: 1.2rem;
            font-size: 0.63rem;
            color: #686868;
          }
        }

        .count {
          font-size: 0.75rem;
          color: #606060;
          line-height: 2.3rem;
        }
      }
    }
  }
}
</style>